<template>
  <div class="top-menu">
    <el-menu :default-active="activeIndex"
             mode="horizontal"
             text-color="#333">
      <!--<el-menu-item index="0" @click.native="openHome(itemHome)" key="0">-->
        <!--<template slot="title">-->
          <!--<i :class="itemHome.source"></i>-->
          <!--<span>{{generateTitle(itemHome)}}</span>-->
        <!--</template>-->
      <!--</el-menu-item>-->
      <!--<template v-for="(item,index) in items">-->
        <!--<el-menu-item :index="item.id+''" @click.native="openMenu(item)" :key="index + 1">-->
          <!--<template slot="title">-->
            <!--<i :class="item.source" style="padding-right: 5px;"></i>-->
            <!--<span>{{generateTitle(item)}}</span>-->
          <!--</template>-->
        <!--</el-menu-item>-->
      <!--</template>-->
      <template v-for="(item,index) in menu">
        <el-menu-item :index="item.id+''" @click.native="openMenu(item)" :key="index + 1" :class="{
          'active': activeTopMenuName && item.name === activeTopMenuName
        }">
          <template slot="title">
            <i :class="item.source" style="padding-right: 5px;"></i>
            <span>{{generateTitle(item)}}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  function isURL(s) {
    if (s.includes('html')) return true;
    return /^http[s]?:\/\/.*/.test(s)
  }
  export default {
    name: "top-menu",
    data() {
      return {
        itemHome: {
          name: '首页',
          source: 'el-icon-menu',
        },
        activeIndex: "0",
        items: [],
        firstAvailMenu:{},
        activeTopMenuName: ''
      };
    },
    inject: ["indexMain"],
    created() {
     // this.getMenu();
    //  this.$router.
    },
    mounted() {

    },
    computed: {
      ...mapGetters(["tagCurrent", "menu"])
    },
    watch: {
      '$store.state.user.menuLoad': function () {
        if(this.$router.currentRoute && this.$router.currentRoute.name === 'dashboard' && this.$store.state.user.menuLoad === true){
          // 登录后默认加载第一个可用菜单
          let firstMenu = null;
          for(let i = 0; i < this.menu.length; i++){
            if(!isURL(this.menu[i].path)){
              firstMenu = this.menu[i];
              break;
            }
          }
          firstMenu && this.openMenu(firstMenu);
        }
      },
      // '$route': 'changeRoute'
    },
    methods: {
      changeRoute(){
        console.log(this.menu);
        let topMenuName = this.$route.matched[0].name || '';
        this.activeTopMenuName = topMenuName;
        // console.log(this.activeTopMenuName);
      },
      openHome(itemHome) {
        this.$breadcrumb.add({
          type: 'index',
          meta: itemHome,
          name: itemHome.name
        });
        this.indexMain.openMenu(itemHome);
        this.$router.push({
          path: this.$router.$avueRouter.getPath({name: itemHome.name, src: ''}, {})
        });
      },
      openMenu(item) {
        if(isURL(item.path)){
          window.open(item.path);
        }else{
          let showMenus = this.indexMain.showMenus;
          this.indexMain.showMenus = true;
          this.$breadcrumb.add({
            type: 'top-menu',
            meta: item,
            name: item.name
          });
          this.$store.commit('SET_SIDEBAR_MENU_TYPE','sidebar-menu-root');
          this.$store.commit('SET_SIDEBAR_MENU',item);
          if(item['children'] && item['children'].length){
            this.getFirstMenu(item['children']);
            let firstMenu = this.firstAvailMenu;
            this.$router.push({
              path: this.$router.$avueRouter.getPath({name: firstMenu.name, src: firstMenu.path}, {})
            }).catch(() => {
              this.indexMain.showMenus = showMenus;
            });
            if(!this.$breadcrumb.excludeRoutes.includes(firstMenu.path)){
              this.$breadcrumb.add({
                type: 'sidebar-menu-root',
                meta: firstMenu,
                name: firstMenu.name,
                path: firstMenu.path
              });
            }
          }else{
            this.indexMain.showMenus = false;
            this.$router.push({
              path: this.$router.$avueRouter.getPath({name: item.name, src: item.path}, {})
            }).catch(() => {
              this.indexMain.showMenus = showMenus;
            });
          }
          // this.index.openMenu(item)
        }

      },
      getFirstMenu(arr){
        let _t = this;
        for(let i = 0,len = arr.length; i < len; i ++ ) {
          let item = arr[i];
          if(item.children && item.children.length > 0){
            let flag = this.getFirstMenu(item.children);
            if(!flag){
              break;
            }
          } else {
            if(item['path']){
              _t.firstAvailMenu = item;
              return false;
            }
          }
        }
      },
      getMenu() {
        this.$store.dispatch("GetTopMenu").then(res => {
          this.items = res;
        });
      },
      generateTitle(item) {
        return this.$router.$avueRouter.generateTitle(
          item.name,
          (item.meta || {}).i18n
        );
      },
    }
  };
</script>
